<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>simpleAlert</title>
    <style>
        *{margin: 0;padding: 0;}
        body{ background-color: #3A3A3A; }
        #main{position: absolute;width: 200px;left: 50%;margin-left: -100px;top:200px;text-align: center;}
        #main li{list-style-type: none;margin-top: 5px;}
        #main li a{color: #fff;}
        #main li a:hover{color: #99e;}
        #main li a:active{color: #e99;}
    </style>
    <link rel="stylesheet" href="css/simpleAlert.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/simpleAlert.js"></script>
    <script>
        $(function () {
            //单次单选弹框
            $("#onlyChoseAlert").click(function () {
                var onlyChoseAlert = simpleAlert({
                    "content":"按确定消失!",
                    "buttons":{
                        "确定":function () {
                            onlyChoseAlert.close();
                        }
                    }
                })
            })
            //单次双选弹框
            $("#dblChoseAlert").click(function () {
                var dblChoseAlert = simpleAlert({
                    "title":"按确定回调",
                    "content":"请按确定回调函数!",
                    "buttons":{
                        "确定":function () {
                            alert("你好");
                            dblChoseAlert.close();
                        },
                        "取消":function () {
                            dblChoseAlert.close();
                        }
                    }
                })
            })
            //多次双选弹框
            $("#manyChoseAlert").click(function () {
                var manyChoseAlert = simpleAlert({
                    "title":"三次确定",
                    "content":"按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键!",
                    "buttons":{
                        "确定":function () {
                            var manyChoseAlert2 = simpleAlert({
                                "content":"再次确定!",
                                "buttons":{
                                    "确定":function () {
                                        var manyChoseAlert3 = simpleAlert({
                                            "content":"最后确定!",
                                            "buttons":{
                                                "确定":function () {
                                                    manyChoseAlert3.close();
                                                }
                                            }
                                        })
                                    },
                                    "取消":function () {
                                        manyChoseAlert2.close();
                                    }
                                }
                            })
                        },
                        "取消":function () {
                            manyChoseAlert.close();
                        }
                    }
                })
            })
            //多次双选弹框全关闭
            $("#manyAllChoseAlert").click(function () {
                var manyAllChoseAlert = simpleAlert({
                    "title":"三次确定－全关闭",
                    "content":"按确定键!",
                    "buttons":{
                        "确定":function () {
                            var manyAllChoseAlert2 = simpleAlert({
                                "content":"再次确定!",
                                "buttons":{
                                    "确定":function () {
                                        var manyAllChoseAlert3 = simpleAlert({
                                            "content":"最后确定－全关闭!",
                                            "closeAll":true,
                                            "buttons":{
                                                "确定":function () {
                                                    manyAllChoseAlert3.close();
                                                }
                                            }
                                        })
                                    },
                                    "取消":function () {
                                        manyAllChoseAlert2.close();
                                    }
                                }
                            })
                        },
                        "取消":function () {
                            manyAllChoseAlert.close();
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<ul id="main">
    <li id="onlyChoseAlert"><a href="#">单次单选弹框</a></li>
    <li id="dblChoseAlert"><a href="#">单次双选弹框</a></li>
    <li id="manyChoseAlert"><a href="#">多次双选弹框</a></li>
    <li id="manyAllChoseAlert"><a href="#">多次双选弹框全关闭</a></li>
</ul>
</body>
</html>